<!DOCTYPE html>
<html>
<body>
<canvas id="circuitCanvas" width="800" height="420"></canvas>
<script>
    const canvas = document.getElementById('circuitCanvas');
    const ctx = canvas.getContext('2d');

    // --- Configuration ---
    const Y_TOP = 150;
    const Y_BOTTOM = 300;
    const Y_MID = (Y_TOP + Y_BOTTOM) / 2;
    const X_START = 60;
    const SECTION_W = 120;
    const CAP_L = 30;
    const CAP_G = 8;
    const FONT_SIZE = 24;
    
    ctx.lineWidth = 1.5;
    ctx.strokeStyle = 'black';
    ctx.fillStyle = 'black';
    ctx.font = `italic ${FONT_SIZE}px "Times New Roman"`;

    // --- Drawing Helper Functions ---
    function drawHCap(x_center, y, label) {
        ctx.beginPath();
        ctx.moveTo(x_center - CAP_G / 2, y - CAP_L / 2);
        ctx.lineTo(x_center - CAP_G / 2, y + CAP_L / 2);
        ctx.moveTo(x_center + CAP_G / 2, y - CAP_L / 2);
        ctx.lineTo(x_center + CAP_G / 2, y + CAP_L / 2);
        ctx.stroke();
        ctx.textAlign = 'center';
        ctx.textBaseline = 'bottom';
        ctx.fillText(label, x_center, y - CAP_L / 2 - 5);
    }

    function drawVCap(x, y_center, label) {
        ctx.beginPath();
        ctx.moveTo(x - CAP_L / 2, y_center - CAP_G / 2);
        ctx.lineTo(x + CAP_L / 2, y_center - CAP_G / 2);
        ctx.moveTo(x - CAP_L / 2, y_center + CAP_G / 2);
        ctx.lineTo(x + CAP_L / 2, y_center + CAP_G / 2);
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.textBaseline = 'middle';
        ctx.fillText(label, x + CAP_L / 2 + 8, y_center);
    }

    // --- Main Drawing Execution ---
    let x = X_START;

    // --- Left Side ---
    // Input Terminals
    ctx.textAlign = 'right';
    ctx.textBaseline = 'middle';
    ctx.fillText('a', x - 10, Y_TOP);
    ctx.fillText('b', x - 10, Y_BOTTOM);

    // Section 1: First H-cap and V-junction
    let x_h_center = x + SECTION_W / 2;
    let x_v_junction = x + SECTION_W;
    ctx.beginPath();
    ctx.moveTo(x, Y_TOP); ctx.lineTo(x_h_center - CAP_G / 2, Y_TOP);
    ctx.moveTo(x, Y_BOTTOM); ctx.lineTo(x_h_center - CAP_G / 2, Y_BOTTOM);
    ctx.stroke();
    drawHCap(x_h_center, Y_TOP, '3C');
    drawHCap(x_h_center, Y_BOTTOM, '3C');
    
    ctx.beginPath();
    ctx.moveTo(x_h_center + CAP_G / 2, Y_TOP); ctx.lineTo(x_v_junction, Y_TOP);
    ctx.moveTo(x_h_center + CAP_G / 2, Y_BOTTOM); ctx.lineTo(x_v_junction, Y_BOTTOM);
    ctx.moveTo(x_v_junction, Y_TOP); ctx.lineTo(x_v_junction, Y_MID - CAP_G / 2);
    ctx.moveTo(x_v_junction, Y_BOTTOM); ctx.lineTo(x_v_junction, Y_MID + CAP_G / 2);
    ctx.stroke();
    drawVCap(x_v_junction, Y_MID, '2C');

    // Section 2: Second H-cap and V-junction
    x = x_v_junction;
    x_h_center = x + SECTION_W / 2;
    x_v_junction = x + SECTION_W;
    ctx.beginPath();
    ctx.moveTo(x, Y_TOP); ctx.lineTo(x_h_center - CAP_G / 2, Y_TOP);
    ctx.moveTo(x, Y_BOTTOM); ctx.lineTo(x_h_center - CAP_G / 2, Y_BOTTOM);
    ctx.stroke();
    drawHCap(x_h_center, Y_TOP, '3C');
    drawHCap(x_h_center, Y_BOTTOM, '3C');

    ctx.beginPath();
    ctx.moveTo(x_h_center + CAP_G / 2, Y_TOP); ctx.lineTo(x_v_junction, Y_TOP);
    ctx.moveTo(x_h_center + CAP_G / 2, Y_BOTTOM); ctx.lineTo(x_v_junction, Y_BOTTOM);
    ctx.moveTo(x_v_junction, Y_TOP); ctx.lineTo(x_v_junction, Y_MID - CAP_G / 2);
    ctx.moveTo(x_v_junction, Y_BOTTOM); ctx.lineTo(x_v_junction, Y_MID + CAP_G / 2);
    ctx.stroke();
    drawVCap(x_v_junction, Y_MID, '2C');

    // Section 3: Third H-cap
    x = x_v_junction;
    x_h_center = x + SECTION_W / 2;
    ctx.beginPath();
    ctx.moveTo(x, Y_TOP); ctx.lineTo(x_h_center - CAP_G / 2, Y_TOP);
    ctx.moveTo(x, Y_BOTTOM); ctx.lineTo(x_h_center - CAP_G / 2, Y_BOTTOM);
    ctx.stroke();
    drawHCap(x_h_center, Y_TOP, '3C');
    drawHCap(x_h_center, Y_BOTTOM, '3C');
    
    x = x_h_center + CAP_G/2; // Position after the 3rd H-cap

    // --- Ellipsis ---
    let x_ellipsis_start = x + SECTION_W / 2 - 20;
    ctx.beginPath();
    ctx.moveTo(x, Y_TOP); ctx.lineTo(x_ellipsis_start, Y_TOP);
    ctx.moveTo(x, Y_BOTTOM); ctx.lineTo(x_ellipsis_start, Y_BOTTOM);
    ctx.stroke();

    ctx.font = `bold ${FONT_SIZE}px "Times New Roman"`;
    ctx.textAlign = 'center';
    ctx.textBaseline = 'middle';
    ctx.fillText('...', x_ellipsis_start + 20, Y_TOP);
    ctx.fillText('...', x_ellipsis_start + 20, Y_BOTTOM);
    ctx.font = `italic ${FONT_SIZE}px "Times New Roman"`; // Reset font

    // --- Right Side ---
    x = x_ellipsis_start + 40;

    // Section 4: Fourth H-cap and final V-junction
    x_h_center = x + SECTION_W / 2;
    x_v_junction = x + SECTION_W;
    ctx.beginPath();
    ctx.moveTo(x, Y_TOP); ctx.lineTo(x_h_center - CAP_G / 2, Y_TOP);
    ctx.moveTo(x, Y_BOTTOM); ctx.lineTo(x_h_center - CAP_G / 2, Y_BOTTOM);
    ctx.stroke();
    drawHCap(x_h_center, Y_TOP, '3C');
    drawHCap(x_h_center, Y_BOTTOM, '3C');

    ctx.beginPath();
    ctx.moveTo(x_h_center + CAP_G / 2, Y_TOP); ctx.lineTo(x_v_junction, Y_TOP);
    ctx.moveTo(x_h_center + CAP_G / 2, Y_BOTTOM); ctx.lineTo(x_v_junction, Y_BOTTOM);
    ctx.moveTo(x_v_junction, Y_TOP); ctx.lineTo(x_v_junction, Y_MID - CAP_G / 2);
    ctx.moveTo(x_v_junction, Y_BOTTOM); ctx.lineTo(x_v_junction, Y_MID + CAP_G / 2);
    ctx.stroke();
    drawVCap(x_v_junction, Y_MID, '2C');

    // Output Terminals
    ctx.textAlign = 'left';
    ctx.textBaseline = 'middle';
    ctx.fillText("a'", x_v_junction + 10, Y_TOP);
    ctx.fillText("b'", x_v_junction + 10, Y_BOTTOM);
    ctx.beginPath();
    ctx.moveTo(x_v_junction, Y_TOP); ctx.lineTo(x_v_junction + 30, Y_TOP);
    ctx.moveTo(x_v_junction, Y_BOTTOM); ctx.lineTo(x_v_junction + 30, Y_BOTTOM);
    ctx.stroke();

    // --- Caption ---
    ctx.textAlign = 'center';
    ctx.textBaseline = 'top';
    ctx.font = `${FONT_SIZE-2}px "SimSun", "Times New Roman"`; // Use a font that supports Chinese characters
    ctx.fillText('电图 4.34.1', canvas.width / 2, Y_BOTTOM + 60);

</script>
</body>
</html>